Опановуємо Navigation API: маршрутизація та керування історією в односторінкових застосунках

Navigation API є значним кроком уперед у тому, як ми обробляємо маршрутизацію та керування історією в односторінкових застосунках (SPA). Традиційні методи часто покладаються на маніпуляції з об'єктом window.location або використання сторонніх бібліотек. Хоча ці підходи добре нам служили, Navigation API пропонує більш оптимізоване, продуктивне та багатофункціональне рішення, надаючи розробникам більший контроль над навігаційним досвідом користувача.

Що таке Navigation API?

Navigation API — це сучасний браузерний API, розроблений для спрощення та покращення способу, яким SPA керують навігацією, маршрутизацією та історією. Він вводить новий об'єкт navigation, що надає методи та події, які дозволяють розробникам перехоплювати та контролювати події навігації, оновлювати URL-адресу та підтримувати послідовну історію переглядів без повного перезавантаження сторінки. Це призводить до швидшого, плавнішого та більш чутливого користувацького досвіду.

Переваги використання Navigation API

• Покращена продуктивність: Усуваючи повні перезавантаження сторінки, Navigation API значно покращує продуктивність SPA. Переходи між різними представленнями стають швидшими та плавнішими, що призводить до більш захоплюючого користувацького досвіду.
• Розширений контроль: API надає детальний контроль над подіями навігації, дозволяючи розробникам перехоплювати та змінювати поведінку навігації за потреби. Це включає запобігання навігації, перенаправлення користувачів та виконання власної логіки до або після навігації.
• Спрощене керування історією: Керування стеком історії браузера стає простішим з Navigation API. Розробники можуть програмно додавати, замінювати та переміщатися по записах історії, забезпечуючи послідовний та передбачуваний досвід перегляду.
• Декларативна навігація: Navigation API заохочує більш декларативний підхід до маршрутизації, дозволяючи розробникам визначати правила та поведінку навігації у зрозумілій та стислій формі. Це покращує читабельність та підтримку коду.
• Інтеграція з сучасними фреймворками: Navigation API розроблений для безшовної інтеграції з сучасними JavaScript-фреймворками та бібліотеками, такими як React, Angular та Vue.js. Це дозволяє розробникам використовувати можливості API у своїх існуючих робочих процесах розробки.

Основні концепції та функції

1. Об'єкт navigation

Серцем Navigation API є об'єкт navigation, доступний через глобальний об'єкт window (тобто, window.navigation). Цей об'єкт надає доступ до різних властивостей та методів, пов'язаних з навігацією, зокрема:

• currentEntry: Повертає об'єкт NavigationHistoryEntry, що представляє поточний запис в історії навігації.
• entries(): Повертає масив об'єктів NavigationHistoryEntry, що представляють усі записи в історії навігації.
• navigate(url, { state, info, replace }): Здійснює перехід за новою URL-адресою.
• back(): Повертає до попереднього запису в історії.
• forward(): Переходить до наступного запису в історії.
• reload(): Перезавантажує поточну сторінку.
• addEventListener(event, listener): Додає слухача подій для подій, пов'язаних з навігацією.

2. NavigationHistoryEntry

Інтерфейс NavigationHistoryEntry представляє один запис в історії навігації. Він надає інформацію про запис, таку як його URL, стан та унікальний ID.

• url: URL-адреса запису історії.
• key: Унікальний ідентифікатор для запису історії.
• id: Ще один унікальний ідентифікатор, особливо корисний для відстеження життєвого циклу події навігації.
• sameDocument: Логічне значення, що вказує, чи призводить навігація до переходу в межах того самого документа.
• getState(): Повертає стан, пов'язаний із записом історії (встановлений під час навігації).

3. Події навігації

Navigation API викликає кілька подій, які дозволяють розробникам відстежувати та контролювати поведінку навігації. До цих подій належать:

• navigate: Викликається, коли ініціюється навігація (наприклад, при натисканні на посилання, відправці форми або виклику navigation.navigate()). Це основна подія для перехоплення та обробки запитів на навігацію.
• navigatesuccess: Викликається, коли навігація успішно завершується.
• navigateerror: Викликається, коли навігація не вдається (наприклад, через помилку мережі або необроблене виключення).
• currentchange: Викликається, коли змінюється поточний запис історії (наприклад, при переході вперед або назад).
• dispose: Викликається, коли NavigationHistoryEntry стає недоступним, наприклад, коли він видаляється з історії під час операції replaceState.

Реалізація маршрутизації з Navigation API: практичний приклад

Проілюструємо, як використовувати Navigation API для реалізації базової маршрутизації у простому SPA. Розглянемо застосунок з трьома представленнями: Головна, Про нас та Контакти.

Спочатку створимо функцію для обробки змін маршруту:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Головна
Ласкаво просимо на Головну сторінку!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Про нас
Дізнайтеся більше про нас.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Контакти
Зв\'яжіться з нами.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Не знайдено
Сторінку не знайдено.
';
  }
}

Далі додамо слухача подій до події navigate:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Запобігаємо стандартній навігації браузера

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Вирішуємо проміс після обробки маршруту
  });

  event.transition = promise;
});

Цей код перехоплює подію navigate, витягує URL з об'єкта event.destination, запобігає стандартній навігації браузера, викликає handleRouteChange для оновлення вмісту та встановлює проміс event.transition. Встановлення event.transition гарантує, що браузер дочекається завершення оновлення вмісту перед візуальним оновленням сторінки.

Нарешті, ви можете створити посилання, які ініціюють навігацію:

Головна | Про нас | Контакти

І приєднати до цих посилань слухача кліків:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Це налаштовує базову маршрутизацію на стороні клієнта за допомогою Navigation API. Тепер натискання на посилання ініціюватиме подію навігації, яка оновлюватиме вміст блоку content без повного перезавантаження сторінки.

Додавання керування станом

Navigation API також дозволяє пов'язувати стан із кожним записом в історії. Це корисно для збереження даних між подіями навігації. Давайте змінимо попередній приклад, щоб включити об'єкт стану.

При виклику navigation.navigate() ви можете передати об'єкт state:

window.navigation.navigate('/about', { state: { pageTitle: 'Про нас' } });

Всередині слухача події navigate ви можете отримати доступ до стану за допомогою event.destination.getState():

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Мій застосунок'; // Заголовок за замовчуванням

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Головна
Ласкаво просимо на Головну сторінку!
';
      title = 'Головна';
      break;
    case '/about':
      contentDiv.innerHTML = '
Про нас
Дізнайтеся більше про нас.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Контакти
Зв\'яжіться з нами.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Не знайдено
Сторінку не знайдено.
';
      title = '404 Не знайдено';
  }
  document.title = title;
}

У цьому зміненому прикладі функція handleRouteChange тепер приймає параметр state і використовує його для оновлення заголовка документа. Якщо стан не передано, за замовчуванням використовується 'Мій застосунок'.

Використання navigation.updateCurrentEntry()

Іноді вам може знадобитися оновити стан поточного запису в історії, не ініціюючи нової навігації. Метод navigation.updateCurrentEntry() дозволяє це зробити. Наприклад, якщо користувач змінює налаштування на поточній сторінці, ви можете оновити стан, щоб відобразити цю зміну:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Налаштування оновлено:', setting, 'на', value);
}

// Приклад використання:
updateUserSetting('theme', 'dark');

Ця функція отримує поточний стан, об'єднує його з оновленим налаштуванням, а потім оновлює поточний запис в історії з новим станом.

Розширені сценарії використання та аспекти

1. Обробка відправки форм

Navigation API можна використовувати для обробки відправки форм у SPA, запобігаючи повному перезавантаженню сторінки та забезпечуючи більш плавний користувацький досвід. Ви можете перехопити подію відправки форми та використати navigation.navigate() для оновлення URL-адреси та відображення результатів без повного перезавантаження сторінки.

2. Асинхронні операції

При обробці подій навігації вам може знадобитися виконувати асинхронні операції, такі як отримання даних з API. Властивість event.transition дозволяє пов'язати проміс з подією навігації, гарантуючи, що браузер дочекається завершення асинхронної операції перед оновленням сторінки. Дивіться приклади вище.

3. Відновлення позиції прокрутки

Підтримка позиції прокрутки під час навігації є важливою для забезпечення гарного користувацького досвіду. Navigation API надає механізми для відновлення позиції прокрутки при переході назад або вперед в історії. Ви можете використовувати властивість scroll об'єкта NavigationHistoryEntry для збереження та відновлення позиції прокрутки.

4. Обробка помилок

Важливо обробляти помилки, які можуть виникнути під час навігації, такі як помилки мережі або необроблені виключення. Подія navigateerror дозволяє вам коректно перехоплювати та обробляти ці помилки, запобігаючи збою застосунку або відображенню повідомлення про помилку користувачеві.

5. Прогресивне поліпшення

При створенні SPA з Navigation API важливо враховувати прогресивне поліпшення. Переконайтеся, що ваш застосунок працює коректно, навіть якщо Navigation API не підтримується браузером. Ви можете використовувати визначення можливостей для перевірки наявності об'єкта navigation і, за потреби, повертатися до традиційних методів маршрутизації.

Порівняння з традиційними методами маршрутизації

Традиційні методи маршрутизації в SPA часто покладаються на маніпуляції з об'єктом window.location або використання сторонніх бібліотек, таких як react-router або vue-router. Хоча ці методи широко використовуються та добре зарекомендували себе, вони мають деякі обмеження:

• Повні перезавантаження сторінки: Пряма маніпуляція window.location може викликати повні перезавантаження сторінки, що може бути повільним та руйнівним для користувацького досвіду.
• Складність: Керування історією та станом за допомогою традиційних методів може бути складним і схильним до помилок, особливо у великих і складних застосунках.
• Накладні витрати на продуктивність: Сторонні бібліотеки маршрутизації можуть додавати значні накладні витрати на продуктивність, особливо якщо вони не оптимізовані для конкретних потреб вашого застосунку.

Navigation API вирішує ці обмеження, надаючи більш оптимізоване, продуктивне та багатофункціональне рішення для маршрутизації та керування історією. Він усуває повні перезавантаження сторінки, спрощує керування історією та надає детальний контроль над подіями навігації.

Сумісність з браузерами

На кінець 2024 року Navigation API має гарну підтримку в сучасних браузерах, включаючи Chrome, Firefox, Safari та Edge. Однак завжди варто перевіряти найновішу інформацію про сумісність з браузерами на таких ресурсах, як Can I use, перед впровадженням Navigation API у ваші продакшн-застосунки. Якщо підтримка старих браузерів є обов'язковою, розгляньте можливість використання поліфілу або резервного механізму.

Висновок

Navigation API — це потужний інструмент для створення сучасних, продуктивних SPA з розширеними можливостями маршрутизації та керування історією. Використовуючи можливості API, розробники можуть створювати швидші, плавніші та більш захоплюючі користувацькі досвіди. Хоча початкова крива навчання може бути дещо крутішою порівняно з використанням простіших, старих методів, переваги Navigation API, особливо у складних застосунках, роблять його вартою інвестицією. Використовуйте Navigation API та розкрийте повний потенціал ваших SPA.

Додаткові матеріали

• MDN Web Docs: Navigation API
• Специфікація WICG Navigation API